<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="float: right;" type="primary" @click="addRole">添加角色</el-button>
      </div>
      <template>
        <el-table
          :data="roleList"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="角色名称"
          />
          <el-table-column
            prop="description"
            label="角色描述"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="obj">
              <el-button type="primary" @click="allotRole(obj.row.id)">分配权限</el-button>
              <el-button @click="editRole(obj.row.id)">编辑</el-button>
              <el-button type="danger" @click="delRole(obj.row.id)">删除</el-button></template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          :pager-count="5"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 添加/编辑弹出框 -->
    <el-dialog
      :visible="isShowRole"
      :title="formData.id?'编辑角色':'添加角色'"
      @close="cancelFn"
    >
      <el-form ref="role" :model="formData" :rules="rules">
        <el-form-item label="角色名称" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="角色描述" prop="description">
          <el-input v-model="formData.description" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="btnFn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配权限弹出框 -->
    <el-dialog
      :visible="isShowPermission"
      title="分配权限"
      @close="cancel"
    >
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          v-for="role in permissionList"
          :key="role.id"
          :label="role.id"
        >
          {{ role.title }}
        </el-checkbox>
      </el-checkbox-group>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="btnOk">提 交</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getRoleList, getRoleCount, delRole, addRole, getRoleId, editRole } from '@/api/role'
import { getPermissionsList } from '@/api/permission'
export default {
  data() {
    return {
      checkList: [],
      permissionList: [],
      formData: {
        title: '',
        description: ''
      },
      rules: {},
      isShowPermission: false,
      isShowRole: false,
      roleList: [],
      total: 0,
      pageConfig: {
        _limit: 5,
        _start: 0
      }
    }
  },
  created() {
    // 获取角色列表
    this.getRoleList()
    // 获取角色数量
    this.getRoleCount()
  },
  methods: {
    // 分配权限弹出框
    async btnOk() {
      this.formData.permissions = this.checkList
      // 发送请求
      await editRole(this.formData)
      // 提醒用户
      this.$message.success('分配成功')
      // 更新页面
      this.getRoleList()
      // 关闭弹框
      this.isShowPermission = false
    },
    cancel() {
      this.isShowPermission = false
    },
    // 点击确定
    async btnFn() {
      // 校验表单
      await this.$refs.role.validate()
      // 发送请求
      if (this.formData.id) {
        // 编辑
        await editRole({ ...this.formData })
      } else {
        // 新增
        await addRole({ ...this.formData })
      }
      // 提示用户
      this.$message.success('操作成功')
      // 关闭弹框
      this.isShowRole = false
      // 更新页面
      this.getRoleList()
    },
    cancelFn() {
      // 清理校验
      this.$refs.role.resetFields()
      // 清理数据
      this.formData = {
        title: '',
        description: ''
      }
      // 关闭弹窗
      this.isShowRole = false
    },
    // 添加角色
    addRole() {
      this.isShowRole = true
    },
    // 分配权限
    async allotRole(id) {
      // 获取所有权限列表
      const res = await getPermissionsList()
      const resPerm = await getRoleId(id)
      this.permissionList = res.data
      const arrCheckList = resPerm.data.permissions
      this.formData = resPerm.data
      // 拿到的是一个数组对象
      // 遍历数组对象，拿到每一项的id添加到checkList
      arrCheckList.forEach(obj => {
        this.checkList.push(obj.id)
      })
      console.log(175, this.permissionList)
      console.log(176, this.formData)
      this.isShowPermission = true
    },
    // 点击编辑按钮
    async editRole(id) {
      // 数据回显
      const res = await getRoleId(id)
      console.log(res)
      this.formData = res.data
      // 弹出弹框
      this.isShowRole = true
    },
    // 删除角色
    async delRole(id) {
    //  二次确认
      await this.$confirm('是否确认删除')
      // 发送请求
      await delRole(id)
      // 提示用户
      this.$message.success('删除成功')
      // 更新页面
      this.getRoleList()
    },
    // 获取角色数量
    async getRoleCount() {
      // 发送请求
      const res = await getRoleCount()
      // console.log(res)
      // 保存数据
      this.total = res.data
    },
    // 点击页码更新
    pageChange(newPage) {
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      // 更新页面
      this.getRoleList()
    },
    // 获取角色列表
    async getRoleList() {
      const res = await getRoleList(this.pageConfig)
      console.log(47, res)
      this.roleList = res.data
    }
  }
}
</script>

<style>
.el-card{
  margin: 20px;
}
.block{
  margin-top: 30px;
 text-align: center;
}
</style>
